<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="讲师名称">
                <el-input v-model="teacher.name" />
            </el-form-item>
            <el-form-item label="讲师排序">
                <el-input-number
                    v-model="teacher.sort"
                    controls-position="right"
                    :Dmin="0"
                />
            </el-form-item>
            <el-form-item label="讲师头衔">
                <el-select
                    v-model="teacher.level"
                    clearable
                    placeholder="请选择"
                >
                    <!--
              数据类型一定要和取出的json中的一致，否则没法回填             因此，这里value使用动态绑定的值，保证其数据类型是number
            -->
                    <el-option
                        :value="1"
                        label="高级讲师"
                    />
                    <el-option
                        :value="2"
                        label="首席讲师"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="讲师资历">
                <el-input v-model="teacher.career" />
            </el-form-item>
            <el-form-item label="讲师简介">
                <el-input
                    v-model="teacher.intro"
                    :rows="10"
                    type="textarea"
                />
            </el-form-item>
            <!-- 讲师头像：TODO -->
            <!-- 讲师头像 -->
            <el-form-item label="讲师头像">
                <!-- 头衔缩略图 -->
                <pan-thumb :image="String(teacher.avatar)" />
                <!-- 文件上传按钮 -->
                <el-button
                    type="primary"
                    icon="el-icon-upload"
                    @click="imagecropperShow=true"
                >更换头像 </el-button>
                <!--
v-show：是否显示上传组件
:key：类似于id，如果一个页面多个图片上传控件，可以做区分
:url：后台上传的url地址
@close：关闭上传组件
@crop-upload-success：上传成功后的回调 -->
                <image-cropper
                    v-show="imagecropperShow"
                    :width="300"
                    :height="300"
                    :key="imagecropperKey"
                    :url="BASE_API+'/eduoss/oss/fileupload'"
                    field="file"
                    @close="close"
                    @crop-upload-success="cropSuccess"
                />
            </el-form-item>

            <el-form-item>
                <el-button
                    :disabled="saveBtnDisabled"
                    type="primary"
                    @click="saveOrUpdate"
                >保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
  
<script>
import teacherApi from '@/api/teacher/teacher.js'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
    components: { ImageCropper, PanThumb },
    data() {
        return {
            teacher: {
                name: '',
                sort: 0,
                level: 1,
                career: '',
                intro: '',
                avatar: ''
            },
            saveBtnDisabled: false, // 保存按钮是否禁用,
            imagecropperShow: false, // 上弹框是否显示
            imagecropperKey: 0, // 上传组件key值
            BASE_API: process.env.BASE_API // 获取dev.env.js里面地址
        }
    },
    methods: {
        close() {
            this.imagecropperShow = false
            this.imagecropperKey += 1
        },
        cropSuccess(data) {
            this.teacher.avatar = data.url
            this.imagecropperShow = false
            this.imagecropperKey += 1
        },
        saveOrUpdate() {
            this.saveBtnDisabled = true
            if (this.teacher.id) {
                this.updateTeacher()
            } else {
                this.saveteacher()
            }
        },
        updatebyidTeacher(id) {
            teacherApi
                .byid(id)
                .then(result => {
                    this.teacher = result.data.teacher
                })
                .catch(function(reason) {
                    alert('错误')
                })
        },
        updateTeacher() {
            teacherApi
                .updatebyid(this.teacher)
                .then(result => {
                    this.$message({
                        type: 'success',
                        message: '成功修改'
                    })
                    this.$router.push({ path: '/teacher/table' })
                })
                .catch(function(reason) {
                    alert('错误')
                })
        },

        saveteacher() {
            teacherApi
                .add(this.teacher)
                .then(result => {
                    this.$message({
                        type: 'success',
                        message: '成功添加'
                    })
                    this.$router.push({ path: '/teacher/table' })
                })
                .catch(function(reason) {
                    alert('错误')
                })
        },
        init() {
            if (this.$route.params && this.$route.params.id) {
                const id = this.$route.params.id
                this.updatebyidTeacher(id)
            } else {
                this.teacher = {}
            }
        }
    },
    created() {
        this.init()
    },
    watch: {
        $route(to, form) {
            this.init()
        }
    }
}
</script>
